<template>
    <div class="layout">
        <TreePond class="tree" @treeselectvalue="treeselectvalue"></TreePond>
        <div class="tab-box">
            <div class="header">
                <div class="title">环境数据</div>
                <div class="container">
                    <div class="el-icon-arrow-left left" @click="leftHandClick"></div>
                    <div class="center" :class="dataitemList.length <= 4 ? 'topCenter' : ''" ref="item">
                        <div v-for="(item, index) in dataitemList" :key="index"
                            :class="item.flag ? 'item item1' : 'item'" @click="getDefaultItem(item, index)">
                            <div class="item-content">
                                <template>
                                    <img class="image" :src="imgList[0].imgUrl" alt=""
                                        v-if="item.dataTypeName.indexOf('酸碱') !== -1 || item.dataTypeName.indexOf('pH') !== -1 || item.dataTypeName.indexOf('PH') !== -1" />
                                    <img class="image" :src="imgList[1].imgUrl" alt=""
                                        v-else-if="item.dataTypeName.indexOf('气') !== -1 || item.dataTypeName.indexOf('氧') !== -1" />
                                    <img class="image" :src="imgList[2].imgUrl" alt=""
                                        v-else-if="item.dataTypeName.indexOf('温') !== -1" />
                                    <img class="image" :src="imgList[3].imgUrl" alt=""
                                        v-else-if="item.dataTypeName.indexOf('光') !== -1" />
                                    <img class="image" :src="imgList[4].imgUrl" alt=""
                                        v-else-if="item.dataTypeName.indexOf('风') !== -1" />
                                    <img class="image" :src="imgList[5].imgUrl" alt=""
                                        v-else-if="item.dataTypeName.indexOf('天气') !== -1 || item.dataTypeName.indexOf('云') !== -1" />
                                    <img class="image" :src="imgList[6].imgUrl" alt=""
                                        v-else-if="item.dataTypeName.indexOf('雨') !== -1" />
                                    <img class="image" :src="imgList[1].imgUrl" alt="" v-else />
                                </template>
                                <div class="img-right">
                                    <div class="time" v-if="item.collectDatetime">
                                        {{ item.collectDatetime.slice(0, 10) }}
                                    </div>
                                    <template>
                                        <div v-if="item.enumListType" class="unit">
                                            {{ item.enumListType.split(';')[item.lastValue1].slice(2) }}
                                        </div>
                                        <div v-else-if="item.lastValue1 && !item.enumListType" class="unit">
                                            {{ item.lastValue1.toFixed(2) }}
                                            <span v-show="item.unitName && item.unitName !== '无'">{{ item.symbol
                                                || item.unitName }}</span>
                                        </div>
                                        <div v-else-if="item.lastValue1 === 0 && !item.enumListType" class="unit">
                                            0{{ item.symbol }}
                                        </div>
                                    </template>
                                    <div class="wl-name">
                                        {{ item.dataItemName }}
                                    </div>
                                </div>
                            </div>
                            <div class="icon">
                                <img v-if="index === 1 || index === 3" class="img2 animation2"
                                    src="@/assets/environment-data/image/up.png" alt="" />
                                <img v-else class="img2 animation2" src="@/assets/environment-data/image/down.png"
                                    alt="" />
                            </div>
                            <div v-show="!item.dataItemId" class="hand">
                                手动数据录入
                            </div>
                        </div>
                    </div>
                    <div class="right el-icon-arrow-right" @click="rightHandClick"></div>
                </div>
            </div>
            <!-- 折线图 -->
            <div class="footer">
                <div v-show="dataitemList.length == 0">无环境数据</div>
                <div class="content" v-show="dataitemList.length > 0">
                    <div class="btns">
                        <div class="left" :class="curveOrLook ? 'activeBtn' : ''" @click="curveLook">
                            曲线查看
                        </div>
                        <div class="right" :class="!LookOrCurve ? 'activeBtn' : ''" @click="tableLook">
                            表格查看
                        </div>
                    </div>
                    <div class="tableChart">
                        <zhechart v-if="zhexiantulistone.xAxisdata && zhexiantulistone.xAxisdata.length > 0"
                            v-show="curveOrLook" :nowwidth="'100%'" :nowheight="'calc(100% - 10px)'"
                            :cdata="zhexiantulistone" :y-axis="yaxiosdataList" />
                        <el-table v-show="!curveOrLook" :data="tableData" :stripe="true" border height="100%"
                            style="width: 100%; height: 100%">
                            <el-table-column type="index" label="序号" width="50" />
                            <el-table-column prop="dataTypeName" label="物联数据名称" width="180" />
                            <el-table-column prop="value" label="数据" />
                            <el-table-column prop="collectDatetime" label="采集时间" />
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import MainSlot from "@/components/MainSlot";
import TableData from '@/components/TableData';
import zhechart from "@/components/Echarts/components/linechart/chartYaxios.vue";
import MenuEquipment from '@/components/NavMenu/menu_equipment.vue';
import TreePond from '@/components/TreePond';
import environmentalDataMonitoring from '@/api/iotMonitoring/environmentalDataMonitoring';
import facilityManagement from '@/api/digtalOperation/facilityManagement';
import { getHours, getMinutes, getMonth, getDate } from "@/utils/time";

export default {
    components: { MainSlot, TableData, MenuEquipment, zhechart, TreePond },
    data() {
        return {
            loading: false,
            currentPage: 0,
            eHeight: "160px",
            imgList: [
                {
                    imgUrl: require("@/assets/environment-data/image/ph.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/humidness.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/temperature.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/sun.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/fengsu.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/yun.png"),
                },
                {
                    imgUrl: require("@/assets/environment-data/image/yuliang.png"),
                }
            ],
            formInline: {
                dataTypeConfigId: "",
                facilityNo: "",
                date: [],
            },
            itemList: [],
            facilityList: [],
            paramslist: {},
            curveOrLook: true,
            LookOrCurve: true,
            // 表格查看
            tableData: [],
            // 默认名称
            defaultName: "",
            // 对比名称集合
            compareNameList: [],
            // 当前选中的数据项
            nowselectdataitemid: 0,
            // 当前地块数据
            nowbatchlist: [],
            // 弹框相关
            dialogVisible: false,
            searchList: {
                dataItemId: "",
                date: [],
            },
            // 当前地块或地块组下的dataitem,不带环境数据
            echartsidelist: [],
            yaxiosdataList: [
                {
                    type: "value",
                    axisLabel: {
                        fontSize: 12,
                    },
                    min: 0,
                    color: "#333333",
                    axisLine: {
                        lineStyle: {
                            color: "#333333",
                        },
                    },
                },
            ],
            // echarts数据
            zhexiantulistone: {},
            // ---环境数据相关
            dataitemList: [],
            dataitemLists: [],
            nowclicklist: [],
            nowclickdataindex: "",
            kuangx: 500,
            kuangy: 400,
            // 当前选中地块组名或地亏啊名
            facilityName: "",
            image: {},
            tqsrc: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            defaultFacilityNO: "",
            // TODO:
            leftOrRightItem: [],
            leftOrRightIndex: 0,

        }
    },

    watch: {
        nowChanceStau(newval) { },
    },
    created() {
        this.getselecltlist();
        this.getNowTime();
    },
    mounted() {
    },
    methods: {
        // 点击树状获取第一条数据
        treeselectvalue(e) {
            this.currentPage = 0
            this.defaultFacilityNO = e.facilityNo;
            this.paramslist = {};
            if (!e.organizationNo) {
                this.$message.warning("请勿选择此地块组");
                return;
            }
            this.facilityName = e.facilityName;
            if (e.facilityGroupNo) {
                this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
            } else if (e.facilityNo) {
                this.paramslist["facilityNo"] = e.facilityNo;
            }
            this.getTableDataList();
        },
        // 获取数据类型-温度-酸碱度等位置及其图片
        getTableDataList() {
            let e = this.paramslist;
            this.paramslist = {};
            if (e.facilityGroupNo) {
                this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
                environmentalDataMonitoring.getdataitemlistone(e.facilityGroupNo).then((res) => {
                    let data = res.data;
                    this.handingdataitem(data);
                });
                return;
            } else if (e.facilityNo) {
                // 走这
                this.paramslist["facilityNo"] = e.facilityNo;
                environmentalDataMonitoring.getdataitemlisttwo(e.facilityNo).then((res) => {
                    let data = res.data;
                    this.handingdataitem(data);
                });
            }
        },
        // 整理数据
        async handingdataitem(list) {
            let newlist = [];
            console.log(list, 'list');
            list.forEach((itemone, indexone) => {
                // 组织数据
                console.log(itemone, "one");
                let itemonelist = [];
                // if (itemone.dataTypeConfig === undefined) {
                itemone.dataCollectNewVOList.forEach(async (itemtwo) => {
                    let nowmessage;
                    // 合并
                    nowmessage = { ...itemone.dataTypeConfig, ...itemtwo };
                    itemonelist.push({
                        ...nowmessage,
                        xaxis: parseInt(nowmessage.xaxis),
                        yaxis: parseInt(nowmessage.yaxis),
                        flag: false
                    });
                });
                newlist.push(itemonelist);
            });
            console.log(newlist, '---')
            let arr = []
            newlist.forEach(el => {
                el.forEach(ell => {
                    arr.push(ell)
                })
            })
            console.log(arr, 'arr');
            setTimeout(() => {
                this.dataitemLists = arr
                this.dataitemList = this.dataitemLists.slice(0, 8)
                // 选择默认类型
                arr.length > 0 && this.getDefaultItem(arr[0]);
            }, 200);
        },
        // TODO:选择数据类型-默认
        getDefaultItem(item, index = 0) {
            this.zhexiantulistone = {};
            this.tableData = [];
            this.leftOrRightItem = item;
            this.leftOrRightIndex = index;
            this.formInline = {
                facilityNo: "",
                dataTypeConfigId: "",
                date: [],
            };
            this.dataitemList.forEach((el) => {
                el.flag = false;
            });
            this.dataitemList[index].flag = true;
            this.defaultName = item.dataTypeName;
            if (item.dataItemId) {
                this.getDefaultChartsDate(item);
            } else if (item.dataTypeConfigId) {
                this.getDefaultChartsDate(item, "typeConfig");
            }
        },
        // TODO:
        // 获取默认数据
        async getDefaultChartsDate(item, type = "") {
            // let day = item[0].collectDatetime.slice(5,7)-1
            // 时间-1天
            let day = new Date(item.collectDatetime);
            day.setDate(day.getDate() - 1);
            let params = {};
            if (type === "") {
                params = {
                    dataItemId: item.dataItemId,
                    endTime: item.collectDatetime, // {date}
                    startTime: this.dateToFormat(day),
                };
            } else {
                params = {
                    dataTypeConfigId: item.dataTypeConfigId,
                    isManualEntry: true,
                    endTime: item.collectDatetime,
                    startTime: this.dateToFormat(day),
                };
            }
            if (this.formInline.date[0]) {
                params.startTime = this.dateToFormat(this.formInline.date[0]);
                params.endTime = this.dateToFormat(this.formInline.date[1]);
            }
            params["facilityNo"] = this.defaultFacilityNO;
            let res = await environmentalDataMonitoring.getzhexiandataleft(params);
            this.tableData = res.data || [];
            this.tableData.forEach((el) => {
                el["dataTypeName"] = this.defaultName;
            });
            let list = res.data || [];
            let xAxisdata = [];
            let nowindex = 0;
            let seriesData = [
                {
                    name: this.defaultName,
                    type: "line",
                    data: [],
                    yAxisIndex: nowindex,
                    barWidth: 10,
                    lineStyle: {
                        color: "#4381b5",
                    },
                    itemStyle: {
                        color: "#4381b5",
                    },
                },
            ];
            list.forEach((item) => {
                seriesData[0]["data"].push(item.value);
                let ggdate = this.dateToFormat(item.collectDatetime);
                xAxisdata.push(ggdate);
            });
            this.zhexiantulistone = {
                unitName: item.symbol || '',
                xAxisdata: xAxisdata,
                xData: ["zh"],
                seriesData: seriesData,
            };
            this.yaxiosdataList = [
                {
                    type: "value",
                    offset: 0,
                    name: item.symbol ? "单位:" + item.symbol : '',
                    axisLabel: {
                        fontSize: 10,
                        color: "#4381b5",
                    },
                    min: 0,
                    axisLine: {
                        lineStyle: {
                            color: "#4381b5",
                        },
                    },
                },
            ];
        },
        getzhexiandataleft(newList, type = "") {
            let date = this.dateToFormattwo(new Date());
            let typeName = newList[0][0].dataTypeName;
            console.log(newList, "new");
            let params = {};
            if (type === "dataTypeConfigId") {
                params = {
                    dataTypeConfigId: newList[0][0].dataTypeConfigId,
                    isManualEntry: true,
                    endTime: `${date} 23:59:59`,
                    startTime: `${date} 00:00:00`,
                };
            } else {
                params = {
                    dataItemId: newList[0][0].dataItemId,
                    endTime: `${date} 23:59:59`,
                    startTime: `${date} 00:00:00`,
                };
            }
            if (this.formInline.date[0]) {
                params.startTime = this.dateToFormat(this.formInline.date[0]);
                params.endTime = this.dateToFormat(this.formInline.date[1]);
            }
            if (this.searchList.date[0]) {
                params.startTime = this.dateToFormat(this.searchList.date[0]);
                params.endTime = this.dateToFormat(this.searchList.date[1]);
            }
            params["facilityNo"] = this.formInline.facilityNo;
            environmentalDataMonitoring.getzhexiandataleft(params).then((res) => {
                if (!res.data) {
                    return;
                }
                if (res.data.length > 0) {
                    // console.log(res.data,'折现');
                    this.handingzhexiangone(res.data, typeName);
                    this.formInline = {};
                } else {
                    this.$message.warning("暂无折线图数据");
                }
            });
        },
        // z3折线图数据处理
        handingzhexiangone(list, name) {
            let xAxisdata = [];
            let xData = ["zh"];
            let nowindex = 0;
            if (this.zhexiantulistone.seriesData) {
                nowindex = this.zhexiantulistone.seriesData.length;
                console.log(nowindex);
            }
            let seriesData = [
                {
                    name: name,
                    type: "line",
                    data: [],
                    // yAxisIndex: nowindex,// 一条y轴
                    barWidth: 10,
                    lineStyle: {
                        color: `rgb(${Math.round(Math.random() * 255)}, ${Math.round(
                            Math.random() * 255
                        )},${Math.round(Math.random() * 255)})`,
                    },
                    itemStyle: {
                        color: `rgb(${Math.round(Math.random() * 255)}, ${Math.round(
                            Math.random() * 255
                        )},${Math.round(Math.random() * 255)})`,
                    }, // 随机色
                },
            ];
            list.forEach((item) => {
                seriesData[0]["data"].push(item.value);
                let ggdate = this.dateToFormat(item.collectDatetime);
                xAxisdata.push(ggdate);
            });
            let oldserData = [];
            if (this.zhexiantulistone.seriesData) {
                oldserData = JSON.parse(
                    JSON.stringify(this.zhexiantulistone.seriesData)
                );
            }
            // 新增一条数据
            this.zhexiantulistone = {
                xAxisdata: xAxisdata,
                xData: xData,
                seriesData: [...seriesData, ...oldserData],
            };
            // console.log(this.zhexiantulistone, "zhe");
        },
        // 获取数据项名称
        getdataitemname(id) {
            let name = "数据项名称";
            this.echartsidelist.forEach((item) => {
                if (id === item.dataItemId) {
                    name = item.dataItemName;
                }
            });
            return name;
        },
        // 对比
        async onCompare() {
            if (this.formInline.facilityNo) {
                let res = await environmentalDataMonitoring.getdataitemlisttwo(
                    this.formInline.facilityNo
                );
                console.log(res, '对比');
                if (res.code === 1) {
                    let compareFacilityNo = res.data;
                    let newList = [];
                    compareFacilityNo.forEach((el) => {
                        // console.log(el.dataCollectNewVOList);
                        let itemoneList = [];
                        el.dataCollectNewVOList.forEach((ell) => {
                            let nowmessage = { ...el.dataTypeConfig, ...ell };
                            itemoneList.push(nowmessage);
                        });
                        newList.push(itemoneList);
                    });
                    newList.forEach((el) => {
                        this.compareNameList.push(el[0].dataTypeName);
                    });
                    newList = newList.filter((el) => {
                        return el[0].dataTypeConfigId === this.formInline.dataTypeConfigId;
                    });
                    if (newList.length > 0) {
                        if (newList[0][0].dataItemId) {
                            this.getzhexiandataleft(newList);
                        } else {
                            this.getzhexiandataleft(newList, "dataTypeConfigId");
                        }
                    } else {
                        this.$message.warning("该地块没有该环境数据，请重新选择");
                    }
                } else {
                    this.$message.warning("该地块没有环境数据，请重新选择");
                }
            } else {
                this.$message.warning("请先选择地块");
            }
        },
        // 获取下拉数据
        async getselecltlist() {
            // 获取物联数据
            let res = await environmentalDataMonitoring.queryItem();
            if (res.code === 1) {
                this.itemList = res.data;
            }
            let params = {
                breedType: sessionStorage.breedType,
                facilityStatus: false,
            };
            // 获取设施
            let result = await facilityManagement.getFacilityListByConditionAll(params);
            this.facilityList = result.data;
        },
        getNowTime() {
            this.month = getMonth();
            this.date = getDate() - 1;
            this.hour = getHours();
            this.minute = getMinutes();
        },
        // 曲线查看
        curveLook() {
            this.curveOrLook = true;
            this.LookOrCurve = true
        },
        // 表格查看
        tableLook() {
            this.LookOrCurve = false;
            this.curveOrLook = false
        },
        facilityChange(e) {
            this.formInline = {
                dataTypeConfigId: "",
                date: [],
                facilityNo: e,
            };
            // console.log(e,'whw');
        },
        // TODO:左右按钮
        leftHandClick() {
            if (this.currentPage > 0) {
                this.currentPage = this.currentPage - 1
                let num = this.currentPage * 8
                this.dataitemList = this.dataitemLists.slice(num, num + 8)
                this.getDefaultItem(this.dataitemList[0]);
            } else {
                this.$message.warning('当前已是第一页')
            }
        },
        rightHandClick() {
            if ((this.currentPage + 1) * 8 >= this.dataitemLists.length) {
                this.$message.warning('当前已是最后一页')
            } else {
                this.currentPage = this.currentPage + 1
                let num = this.currentPage * 8
                this.dataitemList = this.dataitemLists.slice(num, num + 8)
                this.getDefaultItem(this.dataitemList[0]);
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.layout {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .tableData {
        width: calc(100% - 300px);
        height: 100%;
    }

    .tree {
        width: 300px !important;
        height: 100%;
        background-color: #ffffff;
        box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
        border-radius: 6px;
    }
}

::v-deep .slotModule {
    padding: 10px;
    background: #f3f3f3;
    box-shadow: none;
}
</style>

<style lang="scss" scoped>
.tab-box {
    width: calc(100% - 315px);
    height: 100%;
    margin-left: 15px;
    overflow: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;

    .header {
        width: 100%;
        min-height: 280px;
        padding: 15px;
        background-color: #ffffff;
        box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
        border-radius: 6px;

        .title {
            line-height: 50px;
            font-size: 20px;
            font-weight: bold;
            color: #4381b5;
        }

        .container {
            position: relative;
            width: 100%;
            height: calc(100% - 50px);
            padding: 0 50px;

            .left,
            .right {
                width: 35px;
                height: 144px;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 26px;
                color: #ffffff;
                cursor: pointer;
                background-color: #BEE3FF;
            }

            .left {
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }

            .right {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }

            .center {
                width: calc(100% - 70px);
                height: 100%;
                display: flex;
                align-items: flex-start;
                flex-wrap: wrap;

                .item {
                    position: relative;
                    width: calc(100% / 4 - 10px);
                    min-width: 260px;
                    height: 84px;
                    margin: 0 5px;
                    margin-bottom: 14px;
                    padding: 10px;
                    color: #fff;
                    // background-color: #4381b5;

                    background: linear-gradient(135deg, #7BCCFF 0%, #277CC4 100%);
                    border-radius: 6px;
                    cursor: pointer;

                    &:nth-child(4n) {
                        margin-right: 0;
                    }

                    .item-content {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        // position: relative;
                        width: 85%;
                        height: 100%;
                        border-right: 1px dashed #fff;

                        .image {
                            width: 52px;
                            height: 52px;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .img-right {
                            position: relative;
                            margin-left: 20px;
                            flex: 1;
                            // margin-left: 5px;
                            height: 100%;
                            color: #fff;

                            .time {
                                position: absolute;
                                top: 0;
                                font-size: 14px;
                            }

                            .unit {
                                width: 100%;
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                font-size: 28px;
                                font-family: Arial;
                                font-weight: 400;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            .wl-name {
                                width: 100%;
                                position: absolute;
                                bottom: 0;
                                font-size: 14px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }

                    .icon {
                        width: 15%;
                        height: 100%;
                        position: absolute;
                        right: 0;
                        top: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .img2 {
                            width: 13px;
                            height: 24px;
                        }
                    }

                    .hand {
                        position: absolute;
                        top: 0px;
                        right: 0;
                        font-size: 12px;
                        padding: 5px 2px;
                    }
                }

                .item1 {
                    background: #0055AA;
                }
            }

            .topCenter {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
            }
        }
    }

    .footer {
        height: calc(100% - 300px);
        min-height: 300px;
        width: 100%;
        margin-top: 15px;
        padding: 20px 20px;
        background-color: #ffffff;
        box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
        border-radius: 6px;

        .input {
            position: relative;
            height: 36px;
            width: 100%;
            display: flex;
            flex-wrap: nowrap;

            .btn {
                position: absolute;
                right: -80px;
                width: 75px;
                height: 36px;
                cursor: pointer;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .content {
            position: relative;
            margin-top: 30px;
            width: 100%;
            height: 100%;
            margin: 0 auto;

            .tableChart {
                width: 100%;
                margin-top: 10px;
                height: calc(100% - 50px);
                padding: 10px;
                background: #BEE3FE;
            }

            .btns {
                position: absolute;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto;
                top: -20px;
                z-index: 9;

                .left,
                .right {
                    width: 108px;
                    height: 32px;
                    margin: 0 5px;
                    background: #BEE3FE;
                    border-radius: 5px;
                    border: 1px solid #0057AF;
                    text-align: center;
                    line-height: 32px;
                    color: #ffffff;
                    overflow: hidden;
                    cursor: pointer;
                }

                .btn {
                    background-color: #106986;
                    width: 112px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 5px;
                    cursor: pointer;

                    &:nth-child(1) {
                        margin-right: 12px;
                    }
                }

                .btn-curve {
                    background-color: #65e8ce;
                }

                .activeBtn {
                    background: #3199FF;
                    border-radius: 5px;
                    border: 1px solid #2A94FC;
                }
            }
        }
    }

    .tab-box-one {
        width: 100%;
        max-width: 1300px;
        height: 600px;
        max-height: 600px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: top;
        position: relative;
    }

    .tab-box-two {
        width: 100%;
        // height: calc(100% - 700px);
        height: 110px;
        // border: springgreen 1px solid;
        display: flex;
        align-items: center;
        overflow-x: auto;
        padding: 10px;
    }
}

.vdr.active:before {
    display: none;
}

.mydialog {
    width: 100%;
    height: 500px;

    .zh-search {
        width: 100%;
        height: 50px;
        // background-color: springgreen;
        display: flex;

        .search-item {
            margin-right: 20px;
            color: #000 !important;

            ::v-deep .el-input__inner {
                color: #000 !important;
            }
        }

        .zh-search-but {
            color: #000;
            width: 70px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            margin-left: 10px;
            cursor: pointer;
            border: #000 1px solid;
            border-radius: 10px;
            font-weight: 700;
        }
    }

    .zh-main {
        height: 468px;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .zh-side {
            border: aliceblue 1px solid;
            width: 40px;
            max-height: 468px;
            overflow-y: auto;
            overflow-x: hidden;
            font-size: 20px;

            .zh-side-item {
                width: 40px;
                // height: 100px;
                color: aliceblue;
                font-weight: 500;
                display: flex;
                flex-direction: column;
                background-color: #004860;
                border: aliceblue 1px solid;
                padding-right: 5px;
                padding-left: 5px;
                padding-top: 10px;
                padding-bottom: 10px;
                text-align: center;
                cursor: pointer;
            }

            .zh-side-item-select {
                width: 40px;
                // height: 100px;
                color: aliceblue;
                font-weight: 600;
                display: flex;
                flex-direction: column;
                background-image: linear-gradient(#0cbac7, #4ceffe, #0bb9c6);
                border: aliceblue 1px solid;
                padding-right: 5px;
                padding-left: 5px;
                padding-top: 10px;
                padding-bottom: 10px;
                text-align: center;
                cursor: pointer;
            }
        }

        .zh-side::-webkit-scrollbar {
            display: none;
        }

        // background-color: steelblue;
        .zh-echart {
            width: calc(100% - 80px);
            height: 350px;
        }
    }
}

.card-style {
    width: 300px;
    height: 80px;
    margin-right: 10px;
}

.mydialog {
    color: #000000;

    .el-input__inner {
        color: #000000;
    }
}

::v-deep.el-date-editor .el-range-input {
    color: #000;
}

::v-deep .el-select .el-input__inner {
    color: #fff !important;
}

::v-deep .el-dialog {
    background-color: #005d7b;

    .el-dialog__title {
        color: #fff;
    }
}

// 动画
.animation {
    -webkit-animation: twinkling 1.8s infinite ease-in-out;
    animation: twinkling 1.8s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animation2 {
    -webkit-animation: twinkling 1.8s infinite ease-in-out;
    animation: twinkling 1.8s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes twinkling {
    0% {
        opacity: 0.2;
        filter: alpha(opacity=40);
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes twinkling {
    0% {
        opacity: 0.2;
        filter: alpha(opacity=40);
        -webkit-transform: scale(1);
    }

    50% {
        opacity: 0.8;
        filter: alpha(opacity=90);
        -webkit-transform: scale(1.12);
    }

    100% {
        opacity: 0.2;
        filter: alpha(opacity=40);
        -webkit-transform: scale(1);
    }
}

::v-deep .el-form .el-form-item__label {
    width: 80px !important;
    min-width: 0 !important;
    padding-right: 0;
}

// 日期颜色
::v-deep .el-range-input {
    color: #fff !important;
}
</style>